<template>
  <view class="tui-operation" style="position:fixed;bottom:0;left:0;right:0;">
    <view class="tui-operation-right tui-col-12 tui-right-flex tui-btnbox-3">
      <view class="tui-flex-1" v-for="(btn,index) in buttons" :key="index">
        <tui-button
          :type="btn.type || 'white'"
          :shape="btn.shape || 'rightAngle'"
          :size="btn.size || 'small'"
          :disabled="btn.disabled"
          :loading="btn.loading"
          @click="tapBtn(index)"
        >{{btn.text}}</tui-button>
      </view>
    </view>
  </view>
</template>

<script>
import { tuiButton } from "@/components/button/button.vue";
export default {
  components: { tuiButton },
  name: "tuiOperation",
  props: {
    buttons: {
      type: Array,
      default: []
    }
  },
  data() {
    return {};
  },
  methods: {
    tapBtn(index) {
      this.$emit("button-click", index);
    }
  }
};
</script>

<style>
.tui-operation {
  width: 100%;
  height: 100rpx;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tui-operation::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0;
  left: 0;
  border-top: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.tui-operation-right {
  height: 100rpx;
  box-sizing: border-box;
  padding-top: 0;
}
.tui-right-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>